<template>
    <div style="text-align:center ;">外卖袋</div>
    <div class="shop">商家：{{ cartfood[0]?cartfood[0].name.business:""}}</div>
    <TransitionGroup tag="ul" name="list" class="container" >
      <div v-for="item in cartfood" :key="item.name.name" >
        <Cartfoods :name=item.name.name :num=item.num :url=item.name.url :price=item.name.price @del="del(item.name.name)"
          @change="change" />
      </div>
    </TransitionGroup>
    <div class="footer">
      <div class="place"></div>
      <div class="text">共需支付：{{ allprice }}￥</div>
      <el-button type="danger" size="large" class="btn" round>下订单</el-button>
    </div>
  </template>
  <script lang="ts" setup>
  import { storeA } from '@/piniaStore/storeA'
  import { ref } from 'vue';
  import Cartfoods from "../components/CartfoodHome/Cartfood.vue"
  let piniaStoreA = storeA()
  const cartfood = ref(piniaStoreA.Cartfood)
  let allprice = ref(0)
  cartfood.value.forEach((item) => {
    allprice.value += item.name.price * item.num
  })
  //数目改变重新计算总价
  function change() {
    console.log("重新计价")
    allprice.value = 0
    cartfood.value.forEach((item) => {
      allprice.value += item.name.price * item.num
    })
  }
  function del(data: string) {
    console.log(data)
    piniaStoreA.delCartfood(data)
    change()//删除商品后重新计价
  }
  </script>
  <style scoped >
  @media(min-width: 900px){
    .footer {
    /* display: flex; */
    text-align: center;
    width: 30rem;
    background-color: #F7EEAD;
    border-radius: 10px;
    position: fixed;
    bottom: 20%;
  }
  .place{
    width: 50%;
  }
  .text {
    margin: 10px 0;
    color: #D24735;
    font: 23px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif;
  }
  .shop{
  text-align:center;
  color:#8e8225;
  font-size: 30px;
}
  .btn {
    height: 60px;
    width: 100px;
    margin: 10px auto;
  }
  .container{
    position: relative;
    padding: 0;
  }
  }
  @media(max-width : 900px){
    .footer {
    display: flex;
    text-align: center;
    height: 10%;
    background-color: #e3200e;
    border-radius: 10px;
    position: fixed;
    bottom: 20%;
  }
  
  
  .text {
    margin: auto;
    left: 100px;
    color: #D24735;
    font: 23px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif;
  }
  .btn {
    height: 60px;
    width: 100px;
    margin: auto;
  }
  .container{
    position: relative;
    padding: 0;
  }
  }
  /* 动画效果 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  .list-move, /* 对移动中的元素应用的过渡 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }
  
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  
  /* 确保将离开的元素从布局流中删除
    以便能够正确地计算移动的动画。 */
  .list-leave-active {
    position: absolute;
  }
  </style>
  